<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #box{
            border: 1px solid #000;
            padding: 20px;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <h1>JSONP 跨域</h1>
    <button onclick="loadHtml()">加载</button>
    <hr>

    <div id="box"></div>

    <script>
        function makedata(obj) {
            // alert(obj);
            console.log(obj);
            box.innerHTML = '';
            for (var i in obj) {
                box.innerHTML += i + ':' + obj[i] + '<br>';
            }
        }


        // JSONP 关键步骤
        function loadHtml() {
            // 创建一个script标签
            var script = document.createElement('script');
            // 设置JS的 文件地址 为指定域的文件
            script.src = 'http://127.0.0.1/s75/JS11_Bootstrap/php/jsonp.php';
            // 将JS标签 插入到页面之中
            document.body.appendChild(script);
        }




        // 不同域: 协议/域名/端口 任何一个不同都是不同域
        // 浏览器 为了安全限制 默认不允许跨域
        // --disable-web-security --user-data-dir=d:\temp1
        // XHR对象 不支持跨域


        // AJAX 无法跨域
        // function loadHtml() {

        //     var xhr = new XMLHttpRequest();
        //     xhr.onreadystatechange = function() {
        //         if (xhr.status == 200 && xhr.readyState == 4) {
        //             box.innerHTML = '';
        //             var obj = JSON.parse(xhr.responseText);
        //             for (var i in obj) {
        //                 box.innerHTML += i + ':' + obj[i] + '<br>';
        //             }
        //         }
        //     }
        //     xhr.open('get', 'http://127.0.0.1/s75/JS11_Bootstrap/php/jsonp.php', true);
        //     xhr.send();
        // }
    
    </script>
</body>
</html>
